<template>
  <div class="chat-user-item">
    <div class="user-item"
         :class="detail.selected ? 'user-active' : ''">
      <div class="item">
        <div v-if="detail.avatar.length == 1" class="img-wrap">
          <span class="spot-red" v-if="detail.hasNew"></span>
          <el-image
              :src="detail.avatar[0]"
              class="single-img"
          />
        </div>
        <div class="img-wrap" v-else>
          <span class="spot-red" v-if="detail.hasNew"></span>
          <el-image
              v-for="(it,idx) in detail.avatar"
              :key="'ats'+idx"
              :src="it"
              class="group-img"
          />
        </div>
      </div>
      <div class="rt-wrap">
        <span class="font-14">{{ detail.name }}</span>
        <p class="font-12 color-info">{{ detail.lastMsg }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'ChatUserItem',
  props: {
    detail: {
      type: Object,
      default: () => {
      },
    },
  },
  setup(props, {emit}) {
    return {};
  },
});
</script>


<style scoped lang="scss">
.chat-user-item {
  .user-item {
    cursor: pointer;
    padding: 10px;
    display: flex;
    height: 56px;
    flex-direction: row;
    width: 100%;
    align-items: center;

    .item {
      margin-right: 10px;
      background-color: #EFEFEF;

      .img-wrap {
        width: 36px;
        height: 36px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;
        position: relative;

        .spot-red {
          position: absolute;
          right: 0;
          top: 0;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #f63636;
        }
      }

      .offline {
        filter: grayscale(100%);
      }

      .single-img {

        border-radius: 6px;
      }

      .group-img {
        width: 33%;
        height: calc(33% * 1);
      }
    }

    .rt-wrap {
      width: 100%;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 显示省略号 */
      p {
        //padding: 2px 0;
      }
    }

    &:not(.user-active):hover {
      background-color: #e6e6e6;
    }
  }

  .user-active {
    background-color: #d2d2d2;
    font-weight: bold;
  }
}
</style>
